<template>
  <view class="menu-card">
    <view class="menu-con">
      <view
        class="m-item"
        v-for="(item, index) in menuList"
        :key="index"
        hover-class="hover-active"
        @click="toPage(item.pageUrl)"
      >
        <view class="m-badge" v-if="index == 0 && look_my">{{ look_my }}</view>
        <view class="m-badge" v-else-if="item.text">{{ item.text }}</view>
        <image
          :src="item.imgUrl"
          mode="scaleToFill"
          style="width: 120rpx; height: 88rpx"
        />
        <view>{{ item.label }}</view>
      </view>
    </view>

    <view class="menu-news" v-if="total">
      <view class="m-news">
        <image
          src="@/static/index/nice.svg"
          mode="scaleToFill"
          class="m-icon"
        />
        当前地区还有<text style="color: #ff000b">{{ total }}</text>
        位优质对象等您联系
      </view>
      <view class="m-text" @click="toAddr"
        >{{ addTips }}<uni-icons type="right" size="12"></uni-icons
      ></view>
    </view>
  </view>
</template>

<script setup>
import img1 from "@/static/index/m1.png";
import img2 from "@/static/index/m2.png";
import img3 from "@/static/index/m3.png";
import img4 from "@/static/index/m4.png";
import { getItem } from "@/utils/storage";
const props = defineProps({
  total: {
    type: [String, Number],
    default: 0,
  },
  look_my: {
    type: [String, Number],
    default: 0,
  },
  mate_address: {
    type: [String, Array],
    default: "",
  },
});
const emits = defineEmits(["toRegion"]);

const dotStyle = shallowReactive({
  background: "#FA5151",
});

const menuList = reactive([
  {
    imgUrl: img1,
    label: "谁看过我",
    pageUrl: "/subPages/message/index?pageType=look_my",
  },
  {
    imgUrl: img2,
    label: "精准查找",
    text: "新",
    pageUrl: "/subPages/search/index",
  },
  {
    imgUrl: img3,
    label: "加速脱单",
    text: "爆",
    pageUrl: "/subPages/member/supreme",
  },
  {
    imgUrl: img4,
    label: "人工服务",
    pageUrl: "/subPages/serve/index",
  },
]);

const addTips = computed(() => {
  const add = props.mate_address;
  if (add) {
    const len = JSON.parse(add).length;
    if (len >= 3) {
      return "修改择偶地区可为您推荐其他资料 点击修改";
    }
  }

  return "完善择偶地区可为您推荐更多资料 点击完善";
});
const toPage = (url) => {
  uni.navigateTo({ url });
};
const toAddr = () => {
  emits("toRegion");
};
</script>

<style lang="scss" scoped>
.menu-con {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  text-align: center;
  background: #fff;
  margin: 20rpx;
  border-radius: 10rpx;
  .m-item {
    position: relative;
    font-size: 28rpx;
    .m-badge {
      width: 40rpx;
      height: 40rpx;
      border-radius: 40rpx;
      padding: 0 5rpx;
      text-align: center;
      line-height: 40rpx;
      color: #fff;
      background: #fa5151;
      position: absolute;
      right: -5rpx;
      top: -5rpx;
    }
  }
}
.menu-news {
  margin: 20rpx;
}

.m-news {
  font-size: 36rpx;
  color: #000;
  font-weight: 600;
  padding: 10rpx 0;
  display: flex;
  align-items: center;
}

.m-icon {
  width: 40rpx;
  height: 40rpx;
}

.m-text {
  font-size: 28rpx;
  color: #666;
  padding-left: 40rpx;
  letter-spacing: 1rpx;
}
</style>
